<!--
    name:账单详情
    time:2021-10-26
    by:Mr_wu
-->

<template>
    <div class="iframe-cont">
        <!-- 设备详情 -->
        <div class="content">
            <div class="title-view">
                <el-page-header @back="$router.back(-1)" :content="$route.meta.title"></el-page-header>
                <div class="btn" v-if="billInfo.bill">
                    <el-button size="small" v-if="billInfo.bill.billStatus ==1" :disabled="true" >已支付</el-button>
                    <el-button size="small" v-else @click="payPop = true"  type="primary">支付</el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <table class="data-table">
                <tr>
                    <td>账单号</td><td v-if="billInfo.bill">{{billInfo.bill.billCode}}</td>
                    <td>设备数量(台)</td><td v-if="billInfo.bill">{{billInfo.bill.macNum}}</td>
                    <td>续费总时长(月)</td><td v-if="billInfo.bill">{{billInfo.bill.renewMonths}}</td>
                </tr>
                <tr>
                    <td>账单金额(元)</td><td v-if="billInfo.bill">{{billInfo.bill.renewMoney}}</td>
                    <td>支付方式</td>
                    <td v-if="billInfo.bill">
                        <span v-if="billInfo.bill.payType == 1">微信</span>
                        <span v-if="billInfo.bill.payType == 2">支付宝</span>
                        <span v-if="billInfo.bill.payType == 3">系统</span>
                        <span v-if="billInfo.bill.payType == ''" style="color: red">未支付</span>
                    </td>
                    <td>支付号</td><td v-if="billInfo.bill">{{billInfo.bill.payCode || '无'}}</td>
                </tr>
                <tr>
                    <td>续费时间</td><td v-if="billInfo.bill">{{billInfo.bill.payTime || '无'}}</td>
                    <td>开票状态</td>
                    <td colspan="3" v-if="billInfo.bill">
                        <span v-if="billInfo.bill.receiptStatus == 0">未开票</span>
                        <span v-if="billInfo.bill.receiptStatus == 1">已申请</span>
                        <span v-if="billInfo.bill.receiptStatus == 2">已开票</span>
                    </td>
                </tr>
            </table>
        </div>
        <div class="content mar-top-20">
            <div class="title-view">
                <div class="title-name">账单详情</div>
            </div>
            <div style="padding:30px">
                <span>服务费</span>
                <el-divider></el-divider>
                <div class="f f-a-c server" v-for="item in billInfo.serviceFees">
                    <div class="f-2">设备编号：{{item.macCode}}</div>
                    <div class="f-3">设备名称：{{item.macName}}</div>
                    <div class="f-2">续费前到期时间：{{item.beforeExpireTime}}</div>
                    <div class="f-2">续费后到期时间：{{item.afterExpireTime}}</div>
                    <div class="f-2">续费时长(月)：{{billInfo.bill.renewMonths}}</div>
                    <div class="f-2">服务费用(元)：{{item.renewMoney}}</div>
                </div>
            </div>

            <div style="padding: 10px 30px">
                <span>复机费</span>
                <el-divider></el-divider>
                <div class="f f-a-c server" v-for="item in billInfo.serviceStopFees">
                    <div class="f-2">设备编号：{{item.macCode}}</div>
                    <div class="f-3">设备名称：{{item.macName}}</div>
                    <div class="f-2">到期时间：{{item.afterExpireTime}}</div>
                    <div class="f-2">复机费用(元)：{{item.renewMoney}}</div>
                </div>
            </div>
        </div>
        <div class="content mar-top-20">
            <div class="title-view" v-if="billInfo.bill">
                <div class="title-name">支付凭证</div>
                <img :src="billInfo.bill.payReceipt" alt="" style="width: 80px;height: 80px;" class="mar-left-20" v-if="!!billInfo.bill.payReceipt">
            </div>
            <el-divider></el-divider>
            <div></div>
        </div>
        <!-- 支付弹窗-->
        <el-dialog
                :append-to-body="true"
                title="请选择支付方式"
                :visible.sync="payPop"
                width="300px"
                :show-close="false"
                center>
            <div class="f f-j-a f-a-c">
                <div class="f f-d-c f-a-c" style="margin-left: 20px">
                    <i class="iconfont iconzhifubaozhifu pay-icon__zfb pay-icon"></i>
                    <el-button size="mini" type="text" class="mar-top-10" @click="paySuccess">支付宝支付</el-button>
                </div>
                <div class="f f-d-c f-a-c" @click="paySuccess('wx')">
                    <i class="iconfont iconweixinpay pay-icon__wx pay-icon"></i>
                    <el-button size="mini" type="text" class="mar-top-10">微信支付</el-button>
                </div>
            </div>
            <div class="f f-j-c mar-top-20">
                <el-button @click="payPop = false" type="primary">取消</el-button>
            </div>
        </el-dialog>

        <!--拉起支付成功弹窗-->
        <succ-Popup :controlPop="payStatus" @close="receiveClose" :contentPop="popContent"></succ-Popup>

        <!--支付弹窗-->
        <el-dialog
                :append-to-body="true"
                title="支付"
                :visible.sync="payQRPop"
                width="50%"
                :before-close="closePay"
                center>
            <div class="f f-j-c">
                <img :src="payimg" height="300px" alt="">
            </div>
            <div class="f f-j-c">
                <span>请打开微信进行扫码支付</span>
            </div>
            <span slot="footer" class="dialog-footer">
<!--                <el-button v-if="isQRcode" type="primary" @click="downloadQRcode()">下载</el-button>-->
                <el-button @click="closePay">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import succPopup from './components/successPopup'
    export default {
        name: "billDetail",
        data(){
            return{
                payPop:false,
                payStatus:false,//支付状态
                popContent:'续费成功',
                billInfo:{},
                payimg:'',
                payQRPop:false,//微信支付二维码的弹窗
                setInFunc:null,
            }
        },
        components:{succPopup},
        created() {
            this.getInfo(this.$route.query.id);
        },
        methods:{

            //轮询查询支付状态
            lunXunPost(){
                this.$http({
                    method: 'get',
                    url:"/api/serviceFee/queryOrder",
                    data:{
                        billId:this.$route.query.id
                    }
                }).then(res=>{
                    if(res.data !=='暂未支付'){
                        this.payQRPop = false;
                        this.$message.success('支付成功！');
                        clearInterval(this.setInFunc);
                        this.payPop = false;
                        this.payStatus = true;
                        this.getInfo(this.$route.query.id);
                    }
                })
            },

            //关闭支付弹窗事件
            closePay(){
                this.payQRPop = false;
                clearInterval(this.setInFunc);
            },

            //支付
            paySuccess(payType){
                if(payType === 'wx'){
                    this.$http({
                        url:"/api/serviceFee/showPayQRCode",
                        method: 'get',
                        responseType: 'blob',
                        loading:true,
                        data:{
                            billId:this.$route.query.id
                        }
                    }).then(res=>{
                        this.payimg = window.URL.createObjectURL(res)
                        this.payQRPop = true;
                        this.setInFunc = setInterval(()=>{
                            this.lunXunPost();
                        },2000);
                    });
                }
            },

            //接收子组件值--关闭弹窗
            receiveClose(val){
                this.payStatus = val;

            },

            getInfo(id){
                this.$http({
                    url:'/api/serviceFee/getBillInfo',
                    method: 'get',
                    data:{
                        billId:id
                    }
                }).then(res=>{
                    this.billInfo = JSON.parse(JSON.stringify(res.data));
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .pay-icon{
        font-size: 90px;
        cursor: pointer;
        transition: 1s;
        &:hover{
            transform: scale(1.1);
        }
    }
    .pay-icon__zfb{
        color:#3487E8;
        @extend .pay-icon;
    }
    .pay-icon__wx{
        color: #00aa00;
        @extend .pay-icon;
    }
    .server{
        font-weight: bold;
        padding: 8px;
        background-color: rgba(245, 245, 245, 100);
        margin-top: 4px;
        &:first-child{
            margin-top: 0;
        }
    }
    .title-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        .title-name{
            font-weight: bold;
        }
        .btn {
            flex: 1;
            text-align: end;
        }
    }
    td{
        text-align: center;
        &:nth-child(2n-1){
            width: 120px;
        }
    }
</style>
